<template>
  <div class="doc-wrapper">
    <h3 class="tl mb15">{{ title }}</h3>
    <el-form :model="form" label-width="100px" class="doc-form">
      <el-form-item label="文档名称" v-if="isEdit">
        <el-input disabled v-model="form.file_name"></el-input>
      </el-form-item>
      <el-form-item label="文档可见性">
        <el-select v-model="form.state" placeholder="请选择可见性">
          <el-option label="可见" value="1"></el-option>
          <el-option label="不可见" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文件上传">
        <el-upload
          ref="fileRef"
          class="upload"
          :multiple="false"
          :auto-upload="false"
          :on-remove="handleRemove"
          :file-list="fileList"
          :before-upload="beforeUpload"
        >
          <i class="el-icon-plus avatar-uploader-icon"></i>
          <!-- <el-button size="small" type="primary">Click to upload</!-->
          <span class="ml10 file-tip">请选择10M以内的md文件.</span>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <p class="btn-area tr">
          <el-button type="warning" @click="cancel">取消</el-button>
          <el-button type="primary" @click="submmit">提交</el-button>
        </p>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { reactive, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import request from 'request/index';
import { ElNotification } from 'element-plus';
export default {
  name: 'note-add',
  setup(props, ctx) {
    const router = useRouter(),
      route = useRoute();

    const editItem = route.params,
      isEdit = route.params && route.params._id;
    const title = ref(isEdit ? '修改文档' : '新增文档');

    const fileRef = ref(null),
      fileList = ref([]),
      form = reactive({
        file_name: editItem && editItem.file_name ? editItem.file_name : '',
        state: editItem && editItem.state ? editItem.state : '',
        file: ''
      });

    const handleRemove = () => {
      fileList.value = [];
      fileRef.value.clearFiles();
    };
    const beforeUpload = file => {
      console.log(file);
    };
    const cancel = () => {
      router.push({ name: 'docMng' });
    };

    const insert = () => {
      request.postFile('/blog-doc/insert', form).then(data => {
        if (data.state == 200) {
          ElNotification({
            message: '文档添加成功!',
            type: 'success'
          });
          cancel();
        } else {
          ElNotification({
            message: '文档添加失败!',
            type: 'danger'
          });
        }
      });
    };
    const update = () => {
      let params = Object.assign({}, form, { _id: editItem._id });
      request.postFile('/blog-doc/update', params).then(data => {
        if (data.state == 200) {
          ElNotification({
            message: '文档修改成功!',
            type: 'success'
          });
          cancel();
        } else {
          ElNotification({
            message: '文档修改失败!',
            type: 'danger'
          });
        }
      });
    };
    const submmit = () => {
      var input = document.querySelector('.upload .el-upload__input');
      var files = input.files;
      if (!files || files.length == 0) {
        return ElNotification({
          message: '请选择文件',
          type: 'warning'
        });
      }
      form.file = files[0];

      isEdit ? update() : insert();
    };
    return {
      isEdit,
      title,
      fileRef,
      form,
      fileList,
      handleRemove,
      cancel,
      submmit
    };
  }
};
</script>

<style lang="scss" scoped>
.doc-form {
  width: 550px;
  margin: 0 auto;
}
.doc-form .el-form-item__content .el-select {
  width: 100%;
}

.doc-form .el-upload .file-tip {
  color: #ddd;
}
// .avatar-uploader .el-upload {
//   border: 1px dashed #d9d9d9;
//   border-radius: 6px;
//   cursor: pointer;
//   position: relative;
//   overflow: hidden;
// }
.el-upload:hover .avatar-uploader-icon {
  border-color: #409eff;
}
.doc-form .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;

  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
// .avatar {
//   width: 178px;
//   height: 178px;
//   display: block;
// }
</style>
